<template>
  <div class="moldCavity-container">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card class="mold-list" header="模具列表">
          <template #header>
            <div class="card-header">
              <div style="flex: 1">模具列表</div>
              <div>
                <el-button
                  size="small"
                  text
                  type="primary"
                  @click="toMoldFilter"
                >
                  筛选
                </el-button>
              </div>
            </div>
          </template>
          <moldList ref="moldListRef" @to-select-mold="toSelectMold" />
        </el-card>
      </el-col>
      <el-col :span="18">
        <div class="cavity-inv-content">
          <el-card class="cavity-list" header="型腔列表">
            <template #header>
              <div class="card-header">
                <div style="flex: 1">型腔列表</div>
                <div>
                  <el-button
                    :disabled="!state.selectMold"
                    size="small"
                    text
                    type="primary"
                    @click="toAddCavity"
                  >
                    新增
                  </el-button>
                  <el-button
                    :disabled="!state.selectPkCavity"
                    size="small"
                    text
                    type="primary"
                    @click="toRemoveCavity"
                  >
                    删除型腔
                  </el-button>
                </div>
              </div>
            </template>
            <cavityList
              ref="cavityListRef"
              @to-select-cavity="toSelectCavity"
            />
          </el-card>
          <el-divider content-position="center">详情</el-divider>
          <el-card class="inv-list">
            <template #header>
              <div class="card-header">
                <div style="flex: 1">关联物料</div>
                <div>
                  <el-button
                    :disabled="!state.selectPkCavity"
                    size="small"
                    text
                    type="primary"
                    @click="toLinkInv"
                  >
                    关联
                  </el-button>
                  <el-button
                    :disabled="!state.selectPkInv"
                    size="small"
                    text
                    type="primary"
                    @click="toRemoveInv"
                  >
                    删除物料
                  </el-button>
                  <el-button
                    :disabled="!state.selectPkInv"
                    size="small"
                    text
                    type="primary"
                    @click="openUpdateDialog"
                  >
                    修改
                  </el-button>
                </div>
              </div>
            </template>
            <linkInv
              ref="linkInvRef"
              :pk-cavity="state.selectPkCavity"
              @inv-select="invSelected"
            />
          </el-card>
        </div>
      </el-col>
    </el-row>
    <cavity-edit-dialog ref="cavityEditDialogRef" @save-success="saveSuccess" />
    <inv-select ref="invSelectRef" @selected-callback="invSelectCallback" />
    <mold-filter ref="moldFilterRef" @search-callback="searchCallback" />
    <updateDoalog ref="updateDoalogRef" @success-callback="updateCallback" />
  </div>
</template>

<script setup>
  import moldList from './modules/moldList.vue'
  import cavityEditDialog from './dialog/cavityEditDialog.vue'
  import cavityList from './modules/cavityList.vue'
  import invSelect from '@/plugins/InventorySelector/invSelect.vue'
  import linkInv from './modules/linkInv.vue'
  import {
    addCavityInvApi,
    removeCavityApi,
    deleteCavityInvApi,
  } from '@/api/equip/mold_api.ts'
  import moldFilter from './dialog/moldFilter.vue'
  import updateDoalog from './dialog/updateDoalog.vue'
  // import { localStorageConfig } from '@/config/localstorage.config'
  // const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage')
  const cavityEditDialogRef = ref(),
    cavityListRef = ref(),
    invSelectRef = ref(),
    linkInvRef = ref(),
    moldFilterRef = ref(),
    moldListRef = ref(),
    updateDoalogRef = ref()
  const state = reactive({
    selectMold: '',
    selectPkCavity: '',
    selectPkInv: '',
    selectPkCavityInv: '',
  })
  const searchCallback = (searchParam) => {
    console.log('searchParam', searchParam)
    moldListRef.value.toFilter(searchParam)
  }
  const toMoldFilter = () => {
    moldFilterRef.value.handleOpen()
  }
  const toAddCavity = () => {
    cavityEditDialogRef.value.handleOpen(state.selectMold)
  }
  const saveSuccess = () => {
    cavityListRef.value.queryCavityList(state.selectMold)
  }
  const toSelectMold = (selectMold) => {
    state.selectMold = selectMold
    state.selectPkCavity = ''
    cavityListRef.value.queryCavityList(state.selectMold)
  }
  const toSelectCavity = (selectPkCavity) => {
    state.selectPkCavity = selectPkCavity
  }
  const toLinkInv = () => {
    invSelectRef.value.handleOpen(
      {
        isSelf: 1,
      },
      'link'
    )
  }
  const invSelectCallback = async (inv) => {
    const params = {
      pkInv: inv.pkInv,
      pkCavity: state.selectPkCavity,
    }
    const { msg } = await addCavityInvApi(params)
    $baseMessage(msg, 'success')
    // linkInvRef.value.queryInvCavityList()
    linkInvRef.value.refreshInvCavityList()
  }
  const invSelected = (row) => {
    state.selectPkInv = row.pkInv
    state.selectPkCavityInv = row.pkCavityInv
  }
  const toRemoveCavity = () => {
    if (state.selectPkCavity) {
      ElMessageBox.confirm('确定要删除腔型吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await removeCavityApi({
            pkCavity: state.selectPkCavity,
          })
          if (res && String(res.code) === '2000') {
            $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
            state.selectPkCavity = null
          } else {
            $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
          }
        })
        .catch(() => {})
    } else {
      $baseMessage('请选择需要删除的腔型', 'warning')
    }
  }
  const toRemoveInv = () => {
    if (state.selectPkInv) {
      ElMessageBox.confirm('确定要删除该腔型下的存货吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await deleteCavityInvApi({
            pkCavityInv: state.selectPkCavityInv,
            pkInv: state.selectPkInv,
            pkCavity: state.selectPkCavity,
          })
          if (res && String(res.code) === '2000') {
            $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
            linkInvRef.value.refreshInvCavityList()
          } else {
            $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
          }
        })
        .catch(() => {})
    } else {
      $baseMessage('请选择需要删除的存货', 'warning')
    }
  }

  const openUpdateDialog = () =>
    updateDoalogRef.value.openDialog(state.selectPkCavityInv)

  const updateCallback = () => {
    linkInvRef.value.refreshInvCavityList()
  }
</script>
<style lang="scss" scoped>
  .moldCavity-container {
    position: relative;
    :deep(.el-card__header) {
      padding: 12px;
    }
    .mold-list {
      height: calc(-95px + 100vh);
      margin-bottom: 0;

      .card-header {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
    }
    .cavity-inv-content {
      display: flex;
      flex-direction: column;
      height: calc(-100px + 100vh);
      margin-bottom: 0;
      .cavity-list {
        min-height: 150px;
        // margin-bottom: 0;
        .card-header {
          display: flex;
          flex-direction: row;
          width: 100%;
        }
      }
      .inv-list {
        flex: 1;
        margin-bottom: 0;
        .card-header {
          display: flex;
          flex-direction: row;
          width: 100%;
        }
      }
    }
  }
</style>
